<template>
  <div>
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #toolbar>
        <a-button type="primary" @click="handlerOptLog(selectedRow)" :disabled="!hasSelectedRows"> 操作日志 </a-button>
      </template>
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" />
      </template>
    </BasicTable>
    <Drawer @register="registerDrawer" @success="handleSuccess" />
    <BackcardDetailModal @register="registerBackcardDetailModal"></BackcardDetailModal>
    <OptLogModal @register="registerOptLogModal"></OptLogModal>
  </div>
</template>
<script lang="ts" setup name="backcardrecord">
import { ActionItem, BasicTable, TableAction } from '@apps/antd-admin/src/components/Table';
import { useDrawer } from '@apps/antd-admin/src/components/drawer';
import { useModal } from '@apps/antd-admin/src/components/modal';
import Drawer from './components/drawer.vue';
import { useBaseTable } from '@apps/antd-admin/src/hooks';
import { columns, searchFormSchema } from './data/data';
import { Api, checkSub } from './data/api';
import { useMessage } from '@apps/antd-admin/src/hooks/web/useMessage';
import BackcardDetailModal from './components/BackcardDetailModal.vue';
import OptLogModal from '../optlog/OptLogModal.vue';

const { createMessage, createConfirm } = useMessage();
const [registerDrawer, { openDrawer }] = useDrawer();
const [registerBackcardDetailModal, { openModal: openBackcardDetailModal }] = useModal();
const [registerOptLogModal, { openModal: openOptLogModal }] = useModal();
const { prefixCls, tableContext, handleDelete, handleSuccess, handlePost, handleBatchDelete } = useBaseTable({
  designScope: 'backcardRecord-template',
  tableProps: {
    //表格标题
    title: '退卡工单列表',
    //主键字段
    rowKey: 'backcardRecordId',
    handlerName: 'busBackcardRecordListHandler',
    //列表接口
    listUrl: Api.page,
    //删除接口
    delUrl: Api.remove,
    //列定义
    columns,
    //查询表单配置
    formConfig: {
      labelWidth: 120,
      labelCol: { span: 6 },
      schemas: searchFormSchema,
      showExportButton: true,
      exportTimeTypeOptions: [
        { exportTimeType: 1, startDate: 'startDate', endDate: 'endDate' },
        { exportTimeType: 2, startDate: 'refundStartDate', endDate: 'refundEndDate' },
      ],
      exportButtonOptions: {
        code: 'ACTION_backcardrecordExport',
      },
    },
    //操作列配置
    actionColumn: {
      width: 120,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: 'right',
    },
    clickToRowSelect: true,
    rowSelection: {
      type: 'radio',
    },
  },
});

const [registerTable, { reload }, { rowSelection, hasSelectedRows, selectedRow }] = tableContext;

/**
 * 行内操作栏
 */
function getTableAction(record): ActionItem[] {
  return [
    {
      label: '工单详情',
      onClick: handleDetail.bind(null, record),
    },
  ];
}

/**
 * 下拉操作栏
 */
function getDropDownAction(record): ActionItem[] {
  return [
    {
      label: '退卡专员开始审核',
      onClick: handleStartCheck.bind(null, record, 3),
      ifShow: () => {
        return record.isCheck == 1;
      },
      auth: 'ACTION_tuikaStartCheck',
    },
    {
      label: '退卡专员取消退卡',
      onClick: handleCancelBackCard.bind(null, record, 4, '退卡专员取消退卡', '退卡专员确认取消退卡？'),
      ifShow: () => {
        return record.isCheck == 3 || record.isCheck == 8;
      },
      auth: 'ACTION_tuikaCancelBack',
    },
    {
      label: '退卡专员补充信息',
      onClick: handleCheck.bind(null, record, 6, '退卡专员补充信息'),
      ifShow: () => {
        return record.isCheck == 3 || record.isCheck == 8;
      },
      auth: 'ACTION_tuikaPerfectInfo',
    },
    {
      label: '退款专员取消退卡',
      onClick: handleCancelBackCard.bind(null, record, 7, '退款专员取消退卡', '退款专员确认取消退卡？'),
      ifShow: () => {
        return record.isCheck == 6 || record.isCheck == 8 || record.isCheck == 10;
      },
      auth: 'ACTION_tuikuanCancelBack',
    },
    {
      label: '退款专员驳回',
      onClick: handleCheck.bind(null, record, 8, '退款专员驳回'),
      ifShow: () => {
        return record.isCheck == 6 || record.isCheck == 10;
      },
      auth: 'ACTION_tuikuanRejected',
    },
    {
      label: '退款专员确认退款',
      onClick: handleCheck.bind(null, record, 9, '退款专员退款'),
      ifShow: () => {
        return record.isCheck == 6 || record.isCheck == 10;
      },
      auth: 'ACTION_tuikuanConfirmRefund',
    },
    {
      label: '退款专员补退',
      onClick: handleCheck.bind(null, record, 10, '退款专员确认补退'),
      ifShow: () => {
        return record.isCheck == 6 || record.isCheck == 9 || record.isCheck == 10;
      },
      auth: 'ACTION_tuikuanBuTui',
    },
    {
      label: '标记为已退卡未退款',
      onClick: handleCheck.bind(null, record, 11, '标记为已退卡未退款'),
      ifShow: () => {
        return record.isCheck == 6 || record.isCheck == 10;
      },
      auth: 'ACTION_tuikaWeiTuiqian',
    },
  ];
}

function handleDetail(record) {
  openBackcardDetailModal(true, {
    record,
    isUpdate: true,
  });
}

function handlerOptLog(record) {
  let data = { busType: 'BusBackcardRecord', businessId: record.backcardRecordId };
  openOptLogModal(true, {
    data,
    isUpdate: false,
  });
}

function handleStartCheck(record, isCheck) {
  let vipCardNo = record.vipCardNo;
  let backcardRecordId = record.backcardRecordId;
  createConfirm({
    iconType: 'info',
    title: '开始审核',
    content: '退款专员确认开始审核，卡号为' + vipCardNo + '的会员卡？',
    onOk: async () => {
      await checkSub({ backcardRecordId: backcardRecordId, isCheck: isCheck });
      reload();
    },
    onCancel: async () => {},
  });
}

function handleCancelBackCard(record, isCheck, title, content) {
  let backcardRecordId = record.backcardRecordId;
  createConfirm({
    iconType: 'info',
    title: title,
    content: content,
    onOk: async () => {
      await checkSub({ backcardRecordId: backcardRecordId, isCheck: isCheck });
      reload();
    },
    onCancel: async () => {},
  });
}

function handleCheck(record, isCheck, title) {
  openDrawer(true, {
    record,
    isCheck,
    title,
    isUpdate: true,
  });
}
</script>
